<template>
<view class="container">
  <view class="orders-switch">
    <view :class="'item ' + ( showType == 0 ? 'active' : '')" @tap="switchTab" data-index="0">
      <view class="txt">发起的团购</view>
    </view>
    <view :class="'item ' + ( showType == 1 ? 'active' : '')" @tap="switchTab" data-index="1">
      <view class="txt">参加的团购</view>
    </view>
  </view>
  <view class="no-order" v-if="orderList.length <= 0">
    <view class="c">
      <image src="/static/static/images/noCart_old.png"></image>
      <text>尚未参加任何团购</text>
    </view>
  </view>

  <view class="orders">
    <navigator v-for="(item, index) in orderList" :key="index" :url="'../grouponDetail/grouponDetail?id=' + item.id" class="order" open-type="navigate">
      <view class="h">
        <view class="l">订单编号：{{item.orderSn}}</view>
        <view class="r">{{item.orderStatusText}}</view>
      </view>
      <view class="j">
        <view class="l">团购立减：￥{{item.rules.discount}}</view>
        <view class="r">参与时间：{{item.groupon.addTime}}</view>
      </view>
      <view class="i">
        <view class="l">团购要求：{{item.rules.discountMember}}人</view>
        <view class="r">当前参与：{{item.joinerCount}}</view>
      </view>
      <view v-for="(gitem, index2) in item.goodsList" :key="index2" class="goods">
        <view class="img">
          <image :src="gitem.picUrl"></image>
        </view>
        <view class="info">
          <text class="name">{{gitem.goodsName}}</text>
          <text class="number">共{{gitem.number}}件商品</text>
        </view>
        <view class="status"></view>
      </view>
      <view class="b">
        <view class="l">实付：￥{{item.actualPrice}}</view>
        <view class="capsule-tag">
          <zan-capsule color="#e67249" leftText="状态" :rightText="item.joinerCount>=item.rules.discountMember?'已达成':'团购中'"></zan-capsule>
        </view>
        <view class="capsule-tag">
          <zan-capsule color="#e67249" leftText="发起" :rightText="item.creator" v-if="!item.isCreator"></zan-capsule>
        </view>
      </view>
    </navigator>
  </view>
</view>
</template>

<script>
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
import zanCapsule from "../../../lib/zanui-weapp/capsule/index";

export default {
  data() {
    return {
      orderList: [],
      showType: 0
    };
  },

  components: {
    zanCapsule
  },
  props: {},
  onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数
  },

  onPullDownRefresh() {
    uni.showNavigationBarLoading(); //在标题栏中显示加载

    this.getOrderList();
    uni.hideNavigationBarLoading(); //完成停止加载

    uni.stopPullDownRefresh(); //停止下拉刷新
  },

  onReady: function () {// 页面渲染完成
  },
  onShow: function () {
    // 页面显示
    this.getOrderList();
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
    getOrderList() {
      let that = this;
      util.request(api.GroupOnMy, {
        showType: that.showType
      }).then(function (res) {
        if (res.errno === 0) {
          that.setData({
            orderList: res.data.data
          });
        }
      });
    },

    switchTab: function (event) {
      let showType = event.currentTarget.dataset.index;
      this.setData({
        showType: showType
      });
      this.getOrderList();
    }
  }
};
</script>
<style>
page {
  height: 100%;
  width: 100%;
  background: #f4f4f4;
}

.capsule-tag {
  float: right;
  /* padding-right: 10rpx; */
}

.zan-capsule + .zan-capsule {
  margin-left: 5px;
}

.orders-switch {
  width: 100%;
  background: #fff;
  height: 84rpx;
}

.orders-switch .item {
  display: inline-block;
  height: 82rpx;
  width: 50%;
  padding: 0 15rpx;
  text-align: center;
}

.orders-switch .item .txt {
  display: inline-block;
  height: 82rpx;
  padding: 0 20rpx;
  line-height: 82rpx;
  color: #9a9ba1;
  font-size: 30rpx;
  width: 100%;
}

.orders-switch .item.active .txt {
  color: #FF654B;
  border-bottom: 3rpx solid #FF654B;
}

.no-order {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.no-order .c {
  width: 100%;
  height: auto;
  margin-top: 200rpx;
}

.no-order .c image {
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 258rpx;
  height: 258rpx;
}

.no-order .c text {
  margin: 0 auto;
  display: block;
  width: 258rpx;
  height: 29rpx;
  line-height: 29rpx;
  text-align: center;
  font-size: 29rpx;
  color: #999;
}

.orders {
  height: auto;
  width: 100%;
  overflow: hidden;
}

.order {
  margin-top: 20rpx;
  background: #fff;
}

.order .h {
  height: 83.3rpx;
  line-height: 83.3rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
  border-bottom: 1px solid #f4f4f4;
  font-size: 30rpx;
  color: #333;
}

.order .h .l {
  float: left;
}


.order .h .r {
  float: right;
  color: #b4282d;
  font-size: 26rpx;
}

.order .i {
  height: 56rpx;
  line-height: 56rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
  border-bottom: 1px solid #f4f4f4;
}

.order .i .l {
  float: left;
  color: #a78845;
  font-size: 26rpx;
}

.order .i .r {
  float: right;
  color: #a78845;
  font-size: 26rpx;
}

.order .j {
  height: 56rpx;
  line-height: 56rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
}

.order .j .l {
  float: left;
  font-size: 26rpx;
  color: #a78845;
}

.order .j .r {
  float: right;
  color: #a78845;
  font-size: 26rpx;
}

.order .goods {
  display: flex;
  align-items: center;
  height: 199rpx;
  margin-left: 31.25rpx;
}

.order .goods .img {
  height: 145.83rpx;
  width: 145.83rpx;
  background: #f4f4f4;
}

.order .goods .img image {
  height: 145.83rpx;
  width: 145.83rpx;
}

.order .goods .info {
  height: 145.83rpx;
  flex: 1;
  padding-left: 20rpx;
}

.order .goods .name {
  margin-top: 30rpx;
  display: block;
  height: 84rpx;
  line-height: 44rpx;
  color: #333;
  font-size: 30rpx;
}

.order .goods .number {
  display: block;
  height: 37rpx;
  line-height: 37rpx;
  color: #666;
  font-size: 25rpx;
}

.order .goods .status {
  width: 105rpx;
  color: #a78845;
  font-size: 25rpx;
}

.order .b {
  height: 103rpx;
  line-height: 103rpx;
  margin-left: 31.25rpx;
  padding-right: 31.25rpx;
  border-top: 1px solid #f4f4f4;
  font-size: 30rpx;
  color: #333;
}

.order .b .l {
  float: left;
}

.order .b .r {
  float: right;
}

.order .b .btn {
  margin-top: 19rpx;
  height: 64.5rpx;
  line-height: 64.5rpx;
  text-align: center;
  padding: 0 20rpx;
  border-radius: 5rpx;
  font-size: 28rpx;
  color: #fff;
  background: #a78845;
}

</style>